<template>
    <my-ref
        ref="ref"
        @param="preload"
        @loaded="procData"
        :page-size="10"
        :store="false"
        :query.sync="query"
        row-key="id"
        @query="list_query"
        v-bind="$attrs"
        @change="v=>$emit('change',v)"
        :multi="$props.multi"
        v-model="table"
        systemKeys="namespace"
        displayField="fullName"
    >


        <el-table-column label="名称" align="left" width="240">
            <template v-slot="scope">
                <div class="link cell-name">{{ scope.row.name }}</div>
            </template>
        </el-table-column>
        <!--      <el-table-column align="left" label="镜像名" prop="imageName" min-width="240"></el-table-column>-->
        <el-table-column align="left" label="当前环境版本" min-width="240">
            <template v-slot="scope">
                <el-tag>{{ scope.row.imageVersion }}</el-tag>

                <el-tag v-if="scope.row?.readyReplicas == scope.row?.replicas">{{
                        scope.row.readyReplicas
                    }}/{{ scope.row.replicas }}
                </el-tag>
                <el-tag type="danger" v-else>{{ scope.row.readyReplicas }}/{{ scope.row.replicas }}</el-tag>

            </template>
        </el-table-column>


        <template #query="scope">

            <kv label="语言">
                <selector clearable v-model="scope.query.language" enum="JenkinsLanguageEnum" chk="*"></selector>
            </kv>

            <kv label="名称">
                <el-input v-model="scope.query.name"></el-input>
            </kv>

            <kv label="版本">
                <div style="display: flex;align-items: center;">
                    <el-input v-model="scope.query.versionMin"></el-input>
                    <div
                        style="width: 12px;margin: 2px;border: solid 1px #303133;border-radius: 8px;"></div>
                    <el-input v-model="scope.query.versionMax"></el-input>
                </div>
            </kv>
        </template>
    </my-ref>

</template>
<style scoped lang="scss">
.btn {
    display: inline-block;
    cursor: pointer;
    margin-right: 8px;
}

.btn:hover span {
    opacity: 0.8;
    border-bottom: solid 1px gray;
}

::v-deep(tr.row-java) .cell-name {
    color: #1e4a90;
}

::v-deep(tr.row-vue) .cell-name {
    color: #694002;
}

::v-deep(tr.row-node) .cell-name {
    color: #286f04;
}
</style>
<script setup>
/**
 * Created by CodeGenerator at 2021-03-14 15:58:11
 */
import productLine from "@/component/product-line.vue";
import appEnv from "@/component/app-env.vue"




defineOptions({
    name: "k8s-deployment-ref",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"products":[],"query":{"language":"","productLineCode":"","namespace":"","versionMin":"","versionMax":""}});


const $props = defineProps({
    readOnly : { type: Boolean },
    multi : { type: Boolean },
    namespace : { type: String },
    sourceK8sApiHost : { type: String }
});


const $model = defineModel({ type: [Object,Array] });



const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const table = $computed({ get() {
        return $model;
    },set(v){
        var v = Object.assign(v.getJsType() == "array" ? [] : {}, v);
        $emit("update:modelValue", v);
    } });

const list_query = function() {
    this.$refs.ref.url = '/ops/k8s/deployment/list';
};
const export_click = function() {
    jv.info("未实现")
};
const preload = function(param, callback) {
    if (!this.$refs.ref.chk()) {
        return callback(false);
    }
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function(res) {
    res.data.data.forEach(row => {
        row.id = row.name;
        row.namespace = $data.query.namespace;
        row.fullName = row.name + ":" + row.imageVersion;
    })
// this.list = res.data.data
};
const loadData = function(pageNumber) {
    this.$refs.ref.loadData(pageNumber);
};

onMounted( function() {
    $data.query.namespace = $props.namespace;
    jv.$loadData("query", v=> $data.query = v )
} )

watch(namespace, function(v) {
    $data.query.namespace = v;
} ,{ immediate:true });

</script>